<script setup>
import { ref, onMounted } from 'vue'
import {  RouterView } from 'vue-router'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
// 导入图标
import { Headset, VideoPlay, VideoCamera, ArrowDown, List, MessageBox, DocumentCopy, Star } from '@element-plus/icons-vue'
import { useSongStore } from '@/stores/song'
import { getAllSingerList } from '@/api/singer'

const router = useRouter()

// 下拉菜单事件
const handleCommand = (command) => {
  const userStore = useUserStore()
  // 退出系统事件
  if (command === 'exit') {
    // 清除token
    userStore.setToken(null)
    // 跳转登录页面
    router.push('/login')
  }
}

// 新增：logo点击事件处理函数
const handleLogoClick = () => {
  // 跳转到首页（当前路由根路径）
  router.push('/')
}

// 音乐播放器
const songStore = useSongStore()

// 歌手映射表 {id: name}
const singersMap = ref({});
onMounted(async () => {
  // 异步请求获取所有歌手列表
  const { data } = await getAllSingerList();
  // allSingerListdata 是一个数组，格式为 [{ id: 1, name: '歌手A' }, { id: 2, name: '歌手B' }]
  // 将其转换为映射表
  const singersMapTemp = {}
  data.forEach(singer => {
    singersMapTemp[singer.id] = singer.name
  })
  // 将映射表赋值给 singersMap
  singersMap.value = singersMapTemp
  console.log(singersMap.value);
})
// 播放音乐
const playingSong = async row => {
  const { data } = await getSongDetail(row.id)
  data.url = baseURL + '/r' + data.url
  data.pic = baseURL + '/r' + data.pic
  console.log(data);
  songStore.songsList.value.unshift(data)
}
</script>

<template>
  <el-container>
    <el-aside width="200px">
      <!-- 新增：为logo添加点击事件和光标样式 -->
      <div class="logo" @click="handleLogoClick" style="cursor: pointer;">
        <div class="logo-img"></div>
      </div>
      <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo"
        :default-active="$route.path" text-color="#fff" :router="true">
        <!-- 原有菜单项保持不变 -->
        <el-sub-menu index="1">
          <template #title>
            <el-icon>
              <Headset />
            </el-icon>
            <span>音频视频</span>
          </template>
          <el-menu-item index="/song">
            <el-icon>
              <VideoPlay />
            </el-icon>
            <span>音频管理</span>
          </el-menu-item>
          <el-menu-item index="/video">
            <el-icon>
              <VideoCamera />
            </el-icon>
            <span>视频管理</span>
          </el-menu-item>
        </el-sub-menu>
        <el-menu-item index="/singer">
          <el-icon>
            <VideoPlay />
          </el-icon>
          <span>歌手管理</span>
        </el-menu-item>
        <el-sub-menu index="2">
          <template #title>
            <el-icon>
              <MessageBox />
            </el-icon>
            <span>歌单</span>
          </template>
          <el-menu-item index="/songlist">
            <el-icon>
              <DocumentCopy />
            </el-icon>
            <span>歌单管理</span>
          </el-menu-item>
          <el-menu-item index="/rank">
            <el-icon>
              <Star />
            </el-icon>
            <span>歌单评分</span>
          </el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="3">
          <template #title>
            <el-icon>
              <Headset />
            </el-icon>
            <span>用户管理</span>
          </template>
          <el-menu-item index="/admin">
            <el-icon>
              <VideoPlay />
            </el-icon>
            <span>超级用户管理</span>
          </el-menu-item>
          <el-menu-item index="/consumer">
            <el-icon>
              <VideoPlay />
            </el-icon>
            <span>用户信息管理</span>
          </el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="4">
          <template #title>
            <el-icon>
              <List />
            </el-icon>
            <span>评论管理</span>
          </template>
          <el-menu-item index="/comment">
            <el-icon>
              <List />
            </el-icon>
            <span>歌曲评论管理</span>
          </el-menu-item>
          <el-menu-item index="/commentlist">
            <el-icon>
              <List />
            </el-icon>
            <span>歌单评论管理</span>
          </el-menu-item>
        </el-sub-menu>
      </el-menu>
    </el-aside>
    <el-container>
      <el-header>
        <h3>
          梦雷音乐
        </h3>
        <el-dropdown @command="handleCommand">
          <span class="el-dropdown-link">
            <img class="avatar" src="@/assets/images/default.png" alt="" srcset="">
            <el-icon class="el-icon--right">
              <arrow-down />
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <!-- <el-dropdown-item command="userinfo">个人中心</el-dropdown-item>
              <el-dropdown-item command="changeAvatar">修改图像</el-dropdown-item> -->
              <el-dropdown-item divided command="exit">退出系统</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-header>
      <el-main>
        <RouterView></RouterView>
        <!-- 修改：添加v-if控制艺术字显示 -->
        <div v-if="$route.path === '/'" class="artistic-text-container">
          <div class="artistic-text-line">
            <span class="character">梦</span>
            <span class="character">雷</span>
            <span class="character">音</span>
            <span class="character">乐</span>
          </div>
          <div class="artistic-text-line">
            <span class="character">享</span>
            <span class="character">你</span>
            <span class="character">所</span>
            <span class="character">想</span>
          </div>
        </div>
      </el-main>
      <el-footer>
        鲁东大学梦雷音乐软件管理系统@2025
      </el-footer>
      <!-- 音乐播放器组件 -->
      <MusicPlayer :songs="songStore.songsList" :singers="singersMap" :autoPlay="true" />
    </el-container>
  </el-container>
</template>

<style scoped>
/* ====================== 整体容器样式 ====================== */
.el-container {
  height: 100vh;
  /* 全局过渡效果，所有属性变化都会有0.3秒的平滑过渡 */
  transition: all 0.3s ease;
}

/* ====================== 左侧侧边栏样式 ====================== */
.el-aside {
  width: 200px;
  /* 修改为蓝色渐变背景：深蓝(#1e3c72)到中蓝(#2a5298) */
  background: linear-gradient(135deg, #0be4e4, #d9eef3);
  color: #fff; /* 文字颜色为白色 */
  text-align: center; /* 内容居中 */
  line-height: initial; /* 重置行高 */
  height: 100%; /* 占满容器高度 */
  border-right: none; /* 移除右侧边框 */
  box-shadow: 2px 0 10px rgba(143, 72, 72, 0.2); /* 右侧阴影 */
  overflow: hidden; /* 内容溢出隐藏 */
}

/* 新增：logo容器样式（用于包裹图片并添加点击事件） */
.logo {
  width: 100%;
  height: 100px;
  margin-top: 20px; /* 上边距 */
  margin-bottom: 20px; /* 下边距 */
  cursor: pointer; /* 鼠标指针变为手型，提示可点击 */
}

/* 新增：logo图片样式（原logo背景图逻辑移至此处） */
.logo-img {
  width: 100%;
  height: 100%;
  background: url('@/assets/images/梦雷.png') no-repeat center; /* 居中显示Logo */
  background-size: contain; /* 保持比例适应容器 */
  border-radius: 50%; /* 圆形边框 */
  border: 3px solid rgba(255, 255, 255, 0.8); /* 半透明白色边框 */
  box-shadow: 0 0 15px rgba(10, 138, 160, 0.8); /* 白色发光效果 */
  transition: transform 0.3s ease; /* 悬停动画过渡 */
}

/* logo悬停效果 */
.logo-img:hover {
  transform: scale(1.2); /* 悬停时放大20% */
}

/* 侧边栏菜单整体样式 */
.el-menu-vertical-demo {
  border-right: none; /* 移除右侧边框 */
  background-color: transparent !important; /* 菜单背景透明 */
}

/* ====================== 菜单项样式 ====================== */
/* 菜单项和子菜单标题通用样式 */
.el-menu-item, .el-sub-menu__title {
  color: rgba(255, 255, 255, 0.8) !important; /* 白色文字（80%透明度） */
  transition: all 0.3s ease; /* 所有属性变化过渡 */
  padding: 12px 20px !important; /* 内边距（上下12px，左右20px） */
  display: flex; /* 弹性布局 */
  align-items: center; /* 垂直居中 */
  transform-origin: center; /* 变换原点为中心 */
  transform: scale(0.98); /* 默认轻微缩小（0.98倍） */
}

/* 菜单项图标与文字间距 */
.el-menu-item .el-icon, 
.el-sub-menu__title .el-icon {
  margin-right: 10px; /* 图标右侧边距 */
  font-size: 20px; /* 图标大小 */
}

/* 菜单项悬停效果 */
.el-menu-item:hover, 
.el-sub-menu__title:hover {
  background-color: rgba(148, 210, 227, 0.8) !important; /* 悬停背景色：亮蓝(#2196f3)30%透明度 */
  color: #fff !important; /* 文字白色 */
  transform: scale(1.03) !important; /* 悬停放大3% */
  z-index: 1; /* 提升层级防止遮挡 */
}

/* 激活状态菜单项（当前选中项） */
.el-menu-item.is-active {
  background-color: rgba(142, 205, 216, 0.8) !important; /* 激活背景色：亮蓝(#2196f3)40%透明度 */
  color: #ffd04b !important; /* 激活文字颜色：金色 */
  transform: scale(1.02) !important; /* 激活放大2% */
}

/* ====================== 顶部导航栏样式 ====================== */
.el-header {
  display: flex; /* 弹性布局 */
  justify-content: space-between; /* 左右两端对齐 */
  align-items: center; /* 垂直居中 */
  border-bottom: 1px solid rgba(218, 36, 36, 0.8); /* 底部边框（淡红色） */
  background-color: #fff; /* 背景白色 */
  box-shadow: 0 2px 10px rgba(204, 13, 13, 0.9); /* 右侧阴影 */
  padding: 0 20px; /* 左右内边距 */
}

/* 导航栏标题 */
.el-header h3 {
  color: #2b5876; /* 标题颜色：深蓝 */
  margin: 0; /* 移除默认边距 */
  font-weight: 600; /* 字体加粗 */
  font-size: 30px; /* 字体大小 */
  letter-spacing: 15px; /* 字符间距 */
}

/* 用户下拉框触发区域 */
.el-dropdown-link {
  display: flex; /* 弹性布局 */
  align-items: center; /* 垂直居中 */
  cursor: pointer; /* 鼠标指针为手型 */
  color: #2b5876; /* 文字颜色：深蓝 */
  font-weight: 500; /* 字体中等加粗 */
}

/* 用户头像 */
.avatar {
  width: 45px; /* 宽度 */
  height: 45px; /* 高度 */
  border-radius: 50%; /* 圆形 */
  object-fit: cover; /* 图片填充方式 */
  border: 2px solid #fff; /* 白色边框 */
  box-shadow: 0 2px 8px rgba(21, 97, 189, 0.8); /* 阴影效果 */
  transition: transform 0.3s; /* 悬停动画过渡 */
}
.avatar:hover {
  transform: scale(1.05); /* 悬停放大5% */
}

/* ====================== 下拉菜单样式 ====================== */
.el-dropdown-menu {
  border-radius: 8px; /* 圆角 */
  box-shadow: 0 5px 15px rgba(29, 120, 132, 0.8); /* 阴影效果 */
  border: none; /* 移除默认边框 */
  margin-top: 10px; /* 上边距 */
  /* 修改下拉菜单背景色为浅蓝 */
  background-color: #e3f2fd !important;
}

/* 下拉菜单选项 */
.el-dropdown-menu__item {
  padding: 10px 20px; /* 内边距 */
  transition: all 0.2s; /* 所有属性变化过渡 */
}
.el-dropdown-menu__item:hover {
  background-color: #bbdefb; /* 悬停背景色：更浅的蓝 */
}

/* ====================== 主内容区样式 ====================== */
.el-main {
  padding: 20px; /* 内边距 */
  background-color: #f5f9fa; /* 背景浅灰 */
  transition: padding 0.3s; /* 内边距变化过渡 */
  position: relative; /* 设置相对定位，作为艺术字的定位参考 */
  min-height: calc(100vh - 120px); /* 确保主内容区有足够高度 */
}

/* ====================== 页脚样式 ====================== */
.el-footer {
  background-color: #87b2c5; /* 背景蓝灰 */
  color: rgba(255, 255, 255, 0.8); /* 文字白色（80%透明度） */
  text-align: center; /* 文字居中 */
  padding: 15px; /* 内边距 */
  line-height: 1.5; /* 行高 */
  font-size: 14px; /* 字体大小 */
  border-top: none; /* 移除顶部边框 */
  transition: background 0.3s; /* 背景色变化过渡 */
}

/* ====================== 路由视图动画 ====================== */
.router-view {
  animation: fadeIn 0.5s ease; /* 页面切换淡入动画 */
}

/* 淡入动画关键帧 */
@keyframes fadeIn {
  from { 
    opacity: 0; /* 初始透明度0 */
    transform: translateY(10px); /* 初始向下偏移10px */
  }
  to { 
    opacity: 1; /* 最终透明度1 */
    transform: translateY(0); /* 最终位置还原 */
  }
}

/* ====================== 艺术字样式 ====================== */
.artistic-text-container {
  position: absolute;
  right: 5%;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 90%; /* 占据右侧空白区域 */
}

.artistic-text-line {
  display: flex;
  justify-content: center;
  padding: 25px 25px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.3));
  backdrop-filter: blur(5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

.character {
  display: inline-block;
  font-size: 200px; /* 放大字体 */
  font-weight: bold;
  background: linear-gradient(45deg, #FF6B6B, #FFD93D, #6BCB77, #4D96FF);
  background-size: 300% 300%;
  animation: gradient 5s ease infinite;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  margin: 0 2px;
  position: relative;
}

.character:hover {
  transform: rotate(360deg) scale(1.0);
}

.space {
  width: 20px; /* 增加空格宽度 */
}

/* 渐变动画 */
@keyframes gradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* 小屏幕适配 */
@media screen and (max-width: 768px) {
  .artistic-text-container {
    width: 70%; /* 小屏幕上增加宽度占比 */
  }
  
  .character {
    font-size: 28px; /* 小屏幕上减小字体 */
  }
}

/* ====================== 响应式布局 ====================== */
@media screen and (max-width: 768px) {
  .el-aside {
    width: 64px !important; /* 小屏幕侧边栏宽度 */
  }
  .logo {
    height: 60px; /* 小屏幕Logo高度 */
    margin-top: 10px; /* 小屏幕Logo上边距 */
    margin-bottom: 10px; /* 小屏幕Logo下边距 */
  }
  .el-header h3 {
    font-size: 16px; /* 小屏幕标题字体大小 */
  }
}

/* .el-menu {
  --el-menu-bg-color: #3e71a5!important; 菜单背景色 
} */
.el-menu {
    background-color: #40b0c4!important; /* 菜单背景色 */
}
</style>